<template>
    <div class="main">
        <!-- v-chart会自动继承父节点的宽高 -->
        <v-chart :option="getOption()" autoresize></v-chart>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'LeftView',
})
</script>

<script lang="ts" setup>
//   "orderFullYearAxis": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
//   "orderFullYear": [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290],
//   "userFullYearAxis": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
//   "userFullYear": [110, 120, 90, 220, 175, 212, 192, 95, 88, 120, 250, 310],
import { useEchartsStore } from '@/stores/echarts'
import { computed } from 'vue';
const echartsStore = useEchartsStore()
const orderFullYearAxis = computed(() => {
    return echartsStore.echartsData.orderFullYearAxis
})
const orderFullYear = computed(() => {
    return echartsStore.echartsData.orderFullYear
})
const userFullYearAxis = computed(() => {
    return echartsStore.echartsData.userFullYearAxis
})
const userFullYear = computed(() => {
    return echartsStore.echartsData.userFullYear
})

// 接收子组件传递给父组件的数据
const props = defineProps<{
    activeIndex:string
}>()
// 设置配置项
function getOption() {
    // 必须要返回一个对象
    return {
        // 标题
        title:{
            text:props.activeIndex ==='1'? '销售趋势':'访问趋势',
            textStyle:{
                fontSize:'14px'
            },
            top:'5%'
        },
        grid:{
            left:40,
            right:40
        },
        tooltip:{
            trigger:'axis'
        },
        xAxis:{
            data:props.activeIndex === '1'? orderFullYearAxis.value:userFullYearAxis.value,
            axisTick:{
                alignWithLabel:true, //刻度线与标题对齐是否对齐
            }
        },
        yAxis:{
            show:true,
            // 分割线
            splitLine:{
                lineStyle:{
                    //dotted点状虚线 dashed线状虚线
                    type:'dashed'
                }
            }
        },
        series: [
            {
                type:'bar',
                // 类目轴的数据不能写死，需要看是销售额还是访问量，根据传递进来的activeIndex数据决定
                data:props.activeIndex === '1'? orderFullYear.value : userFullYear.value,
                barWidth:'35%'
            }
        ]
    }
}
</script>

<style scoped>
.main {
    height: 300px;
}
</style>